<template>
	<div class="swiper tabs-swiper" >
		<ol class="tabs swiper-wrapper" >
			<li v-for="item in tabsList" :key="item.id" class="swiper-slide" >
				<router-link to="/" >
					<img :src="item.src">
					<p>{{item.name}}</p>
				</router-link>
			</li>
		</ol>
	</div>
</template>

<script>
	import {
		onMounted
	} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	export default {
		name: 'Gengduo',
		props : {
			propsgengduo : {
				type : Object,
				default :function(){
					return {}
				}
			}
		},
		data() {
			return {
				tabsList: [
					// {
					// 	id: 1,
					// 	src:'img/GengPicture/1.png',
					// 	name: '经典导航'
					// },
					// {
					// 	id: 2,
					// 	src:'img/GengPicture/2.png',
					// 	name: '攻略'
					// },
					// {
					// 	id: 3,
					// 	src:'img/GengPicture/3.png',
					// 	name: '风情名宿'
					// },
					// {
					// 	id: 4,
					// 	src:'img/GengPicture/4.png',
					// 	name: '美食'
					// },
					// {
					// 	id: 5,
					// 	src:'img/GengPicture/5.png',
					// 	name: '猫眼影院'
					// },
					// {
					// 	id: 6,
					// 	src:'img/GengPicture/6.png',
					// 	name: '购物'
					// },
					// {
					// 	id: 7,
					// 	src:'img/GengPicture/7.png',
					// 	name: '出行服务'
					// },
					// {
					// 	id: 8,
					// 	src:'img/GengPicture/8.png',
					// 	name: '租车服务'
					// },
					// {
					// 	id: 9,
					// 	src:'img/GengPicture/9.png',
					// 	name: '景点打卡'
					// },
					// {
					// 	id: 10,
					// 	src: 'GengPicture/10.png',
					// 	name: '收藏'
					// },
					// {
					// 	id: 11,
					// 	src: 'GengPicture/11.png',
					// 	name: '旅游贷'
					// },
					// {
					// 	id: 12,
					// 	src: 'GengPicture/12.png',
					// 	name: '驴友'
					// }
				],
			}
		},
		watch : {
			propsgengduo(){
				this.tabsList = this.propsgengduo;
				// console.log( this.propsgengduo );
			}
		},
		updated(){
			new Swiper( '.tabs-swiper' , {
				slidesPerView : 5,
				// slidesPerGroup : 3,
		
			} )
		}
	}
</script>

<style scoped>
	a
	{
		text-decoration: none;
		color: black;
	}
	.tabs
	{
		padding: 0.3rem 0;
		display: flex;
		align-items: center;
	}
	.tabs li
	{
		float: left;
		width: 20%;
		text-align: center;
	}
	.tabs li img
	{
		width: 0.8rem;
		height: 0.8rem;
	}
	.tabs li p
	{
		padding: 0.2rem 0;
	}
</style>
